<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>鬼谷无双_拼图</title>
    <meta name="Keywords" content="无双,鬼谷无双,鬼谷无双官网,灭国网游,轻松升级,武侠类角色扮演,终极封测,公会专属测试"/>
    <meta name="Description" content="冰川网络2017全新力作《鬼谷无双》今日终极封测！游戏独创灭国系统，全面超越国战战败不减福利的传统玩法，真实再现“国破家亡”的深仇大恨，玩家全盘掌握世界格局，天下分合由你做主！轻松升级、弹幕吐槽、自由社交、转职转国、惊险副本、丰富日常，更多精彩等你体验！"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <!--不进行缓存 但是只能清除一次缓存-->
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
    <meta http-equiv="expires" content="0"/>
    <script src="http://css.res.szgla.com/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        //js动态屏幕适配
        var html = document.getElementsByTagName("html")[0];
        var pageWidth = html.getBoundingClientRect().width;
        html.style.fontSize = pageWidth + 'px';
    </script>
    <style type="text/css">
        *{margin:0;padding:0;border:none;list-style: none;text-decoration:none;}
        html,body{background: #0C1019;overflow-x:hidden;}
        a,div{text-decoration: none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
        section{width: 100%;position:absolute;z-index: 1;}
        #section1{display: block;height: 100%;background: url(http://img.res.szgla.com/ws/images/h5/pintu/loadingBg.jpg) no-repeat center center #0C1019;background-size:100%;color:#fff;top:0;left:0;}
        .loading{width: 100%;overflow: hidden;height:0.24rem;position:absolute;top:50%;left:0;margin-top: -0.12rem;text-align: center;}
        .loading img{width:0.2733rem;position: absolute;top:0;left:50%;margin-left: -0.13rem;}
        .loadBg{width: 50%;height: 2px;background: #646d76;position: absolute;top:0.16rem;left:25%;overflow:hidden;}
        .loading p{position: absolute;bottom:0;left: 0;width: 100%;font-size: 0.03rem;color:#fff;}
        #loading{width: 0%;height: 2px;position:absolute;left:0;background:#ff0000; transition: width 2s;
            -moz-transition: width 2s; /* Firefox 4 */
            -webkit-transition: width 2s; /* Safari 和 Chrome */
            -o-transition: width 2s; /* Opera */}
        #section2{display: none;height:1.72rem;background: url(http://img.res.szgla.com/ws/images/h5/pintu/s1bg.jpg) no-repeat;background-size:100%;top:0;left:0;}
        #section2 .ruleBtn{width: 0.28rem;height:0.104rem;position:absolute;bottom:7%;left:0;z-index: 1;line-height: 0;font-size: 1rem;}
        #section2 .ruleBtn img{width: 100%;}
        #section2 .beginBtn{width: 0.524rem;position:absolute;bottom:0;right:0;z-index: 1;}
        #section2 .beginBtn img{width: 100%;}
        #section3{display: none;height:172vw;background: url(http://img.res.szgla.com/ws/images/h5/pintu/s2bg.jpg) no-repeat;background-size:100%;top:0;left:0;}
        .dtime{position:absolute;width: 100%;height: 5.6vw;color:#ff0000;font-size:5vw;top:54vw;left:0;z-index: 5;text-align: center;}
        .dtime img{height: 100%;}
        .dtime span{vertical-align: top;height: 5.6vw;line-height: 5.6vw;}
        #pintu{border-radius: 2vw;overflow:hidden;width: 75.46vw;height: 75.46vw;position:absolute;left:12.27vw;top:64vw;z-index: 5;}
        #readyTime{border-radius: 2vw;overflow:hidden;width: 75.46vw;height: 75.46vw;line-height: 75.46vw;position:absolute;left:12.27vw;top:64vw;z-index: 8;background: #000;color:#fff;font-size: 50vw;text-align: center;}

        .zz{display:none;position:absolute;z-index:100;top:0;left:0;width:100%;height: 172vw;background: #000;opacity: 0.7;-moz-opacity: 0.7;filter:alpha(opacity=70);}
        .ruleBox{display:none;position:absolute;z-index: 101;width: 90vw;left:5vw;padding-top:5vw;top:30vw;opacity: 0;}
        .ruleBox img{width: 100%;}
        .pisBox{display:none;position:absolute;z-index: 101;width: 90vw;left:5vw;padding-top:5vw;top:40vw;}
        .pisBox img{width: 100%;}
        .keyBox{color:#fff;text-align: center;position:absolute;top:47%;font-size: 4vw;width: 100%;height:8vw;left:0;z-index: 10;}
        .keyBox span{font-size: 5vw;}
        .utime{position:absolute;font-size: 3vw;z-index: 10;bottom:25vw;color:#757b8f;left:5vw;}
        .utime span{color:#9f1714;font-weight:bold;font-size: 4vw;}
        .xtime{position:absolute;font-size: 3vw;z-index: 10;bottom:25vw;color:#757b8f;right:3vw;display: none;}
        .xtime span{color:#9f1714;font-weight:bold;font-size: 4vw;}
        .goodTime{position:absolute;font-size: 3vw;z-index: 10;bottom:25vw;color:#757b8f;right:3vw;display: none;}
        .resetBtn{width: 18vw;position: absolute;z-index: 10;left: 3vw;bottom:9vw;}
        .shareBtn{width: 18vw;position: absolute;z-index: 10;right: 3vw;bottom:9vw;}
        .endBtn{width: 36vw;height: 12vw;bottom:0;left:50%;position:absolute;margin-left:-18vw;z-index: 10;overflow:hidden;text-indent: -9999px;}
        .close{width: 7.2vw;height: 7.2vw;background: url(http://img.res.szgla.com/ws/images/h5/pintu/closeBtn.png) no-repeat;background-size:100%;position:absolute;top:0;right:0;overflow: hidden;text-indent: -9999px;}
        .endBox{width: 100%;position:fixed;height: 20vw;font-size: 4vw;text-align: center;background: rgba(0,0,0,0.3);z-index: 101;color:#fff;left:0;top:-20vw;
            transition: top 0.5s;
            -moz-transition: top 0.5s; /* Firefox 4 */
            -webkit-transition: top 0.5s; /* Safari 和 Chrome */
            -o-transition: top 0.5s; /* Opera */}
        .endBox p{line-height: 15vw;}
        .endLoad{width: 100%;height: 5px;background: #fff;position: absolute;bottom:0;overflow:hidden;}
        .endLoad div{width: 0%;height: 5px;position:absolute;left:0;background:#ff0000; transition: width 3s;
            -moz-transition: width 3s; /* Firefox 4 */
            -webkit-transition: width 3s; /* Safari 和 Chrome */
            -o-transition: width 3s; /* Opera */
        }

        .view{position:fixed;z-index:9999;top:0;bottom:0;left:0;right:0;width:100%;background:rgba(0,0,0,.6); display:none; padding-top:20%; text-align:center;}
        .view p{font-size:2em;color:#f00}
        @-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}
        .bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;display: block;}
        .animated {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both
        }
        .zz2{position:fixed;z-index: 150;width: 100%;height: 100%;background: #000;opacity: 0.8;-moz-opacity: 0.8;filter:alpha(opacity=80);display: none;}
        .shareBox{position:fixed;z-index: 151;width: 100%;height: 100%;background:url(http://img.res.szgla.com/ws/images/h5/pintu/shareBox.png) no-repeat; background-size:100%;display: none; }
    </style>

</head>
<body>
<section id="section1">
    <div class="loading">
        <img src="http://img.res.szgla.com/ws/images/h5/pintu/logo.png">
        <div class="loadBg">
            <div id="loading"></div>
        </div>
        <p>稍等片刻，精彩即将开启...</p>
    </div>
</section>
<section id="section2">
    <div class="ruleBtn" ><img src="http://img.res.szgla.com/ws/images/h5/pintu/s1Btn1.png" alt="游戏规则"></div>
    <div class="beginBtn"><img src="http://img.res.szgla.com/ws/images/h5/pintu/s1Btn2.png" alt="开始游戏"></div>
</section>
<section id="section3">
    <div class="dtime"><img src="http://img.res.szgla.com/ws/images/h5/pintu/time.png" alt="计时"><span id="dtime">0s</span></div>
    <div id="pintu"></div>
    <div id="readyTime">3</div>
</section>

<div class="zz"></div>
<!--规则-->
<div class="ruleBox">
    <div class="close">关闭</div>
    <img src="http://img.res.szgla.com/ws/images/h5/pintu/ruleImg.png" alt="拼图规则">
</div>
<!--礼包-->
<div class="pisBox">
    <img src="http://img.res.szgla.com/ws/images/h5/pintu/endBg.png" alt="礼包背景">
    <p class="keyBox">CD-KEY:<span id="cdkey">RSRFHJULKD215aw</span></p>
    <p class="utime">本次时间:<span id="utime">0s</span></p>
    <p class="xtime">仅差<span id="xtime">0</span>秒就能迈入大神行列！</p>
    <p class="goodTime">哇塞，您是拼图大神耶！</p>
    <div class="resetBtn"><img src="http://img.res.szgla.com/ws/images/h5/pintu/resetBtn.png" alt="不服再战"></div>
    <div class="shareBtn"><img src="http://img.res.szgla.com/ws/images/h5/pintu/shareBtn.png" alt="分享按钮"></div>
    <div class="endBtn">激活礼包</div>
</div>
<!--完成提示框-->
<div class="endBox">
    <p>恭喜完成拼图，请稍后...</p>
    <div class="endLoad">
        <div></div>
    </div>
</div>
<div class="zz2"></div>
<div class="shareBox"></div>

<div class="view">
    <p>推荐使用竖屏浏览哦~</p>
</div>

<script src="http://img.res.szgla.com/ws/js/h5/pintu.js" type="text/javascript"></script>
<script type="text/javascript">
    var urls=[
            "http://img.res.szgla.com/ws/images/h5/pintu/loadingBg.jpg",
            "http://img.res.szgla.com/ws/images/h5/pintu/closeBtn.png",
            "http://img.res.szgla.com/ws/images/h5/pintu/endBg.png",
            "http://img.res.szgla.com/ws/images/h5/pintu/logo.png",
            "http://img.res.szgla.com/ws/images/h5/pintu/pintu.jpg",
            "http://img.res.szgla.com/ws/images/h5/pintu/resetBtn.png",
            "http://img.res.szgla.com/ws/images/h5/pintu/s1bg.jpg",
            "http://img.res.szgla.com/ws/images/h5/pintu/s1Btn1.png",
            "http://img.res.szgla.com/ws/images/h5/pintu/s1Btn2.png",
            "http://img.res.szgla.com/ws/images/h5/pintu/s2bg.jpg",
            "http://img.res.szgla.com/ws/images/h5/pintu/shareBtn.png",
            "http://img.res.szgla.com/ws/images/h5/pintu/time.png",
            "http://img.res.szgla.com/ws/images/h5/pintu/shareBox.png"
    ];
    var lnum=0;
    var lsum=urls.length;
    var loadTime;//loading定时器
    var winW=$(window).width();
    var readyTime;//准备3秒定时器
    var readyNum=3;//准备3秒数字
    var dTime;//计时定时器
    var dnum=0;//计时数字
    var pstate=0;//页面进度

    $(document).ready(function(){
        for(var i=0;i<lsum;i++){
            var img=new Image();
            img.src=urls[i];
            img.onload=function(){
                lnum++;
                if(lnum>lsum){
                    lnum=lsum;
                    return;
                }
                var present=parseInt((lnum/lsum)*100)+"%";
                $("#loading").css({"width":present});
            }
        }
        loadTime=setInterval(function(){
            if($("#loading").width()>=$(".loadBg").width()){
                clearInterval(loadTime);
                $("#section1").fadeOut(500);
                $("#section2").fadeIn(800);
                pstate=1
            }
        },50);
    });

    //游戏规则
    $(".ruleBtn").on("click",function(){
        $(".zz").fadeIn(300);
        $(".ruleBox").addClass("bounceIn animated");
    });
    //开始拼图
    $(".beginBtn").on("click",function(){
        $("#section3").fadeIn(500);
        $("#section2").fadeOut(500);
        pstate=2;
        beginGame();
    });

    function beginGame(){
        pintuInit(3,3);
        setTimeout(function(){
            readyTime=setInterval(function(){
                readyNum--;
                $("#readyTime").text(readyNum);
                if(readyNum<=0){
                    clearInterval(readyTime);
                    pstate=3;
                    $("#readyTime").hide();
                    readyNum=3;
                    dTime=setInterval(function(){
                        dnum++;
                        $("#dtime").text(dnum+"s");
                    },1000);
                }
            },1000);
        },500);
    }

    //关闭按钮
    $(".ruleBox .close").on("click",function(){
        $(".zz").fadeOut(300);
        $(".ruleBox").removeClass("bounceIn animated");
    });

    //不服再战按钮
    $(".resetBtn").on("click",function(){
        $(".zz").hide();
        $(".pisBox").removeClass("bounceIn animated");
        $("#readyTime").show().text(readyNum);
        $("#dtime").text("0s");
        dnum=0;
        pstate=2;
        beginGame();

    });

    //分享按钮
    $(".shareBtn").on("click",function(){
        $(".zz2").fadeIn(300);
        $(".shareBox").fadeIn(300);
    });
    $(".zz2").on("click",function(){
        $(".zz2").fadeOut(300);
        $(".shareBox").fadeOut(300);
    });
    $(".shareBox").on("click",function(){
        $(".zz2").fadeOut(300);
        $(".shareBox").fadeOut(300);
    });
    //激活礼包
    $(".endBtn").on("click",function(){
        alert("激活礼包");
    });

    //拼图初始化
    function pintuInit(h,l){
        var pt=new ptClass();
        pt.h=h;//行
        pt.l=l;//列
        pt.img="http://img.res.szgla.com/ws/images/h5/pintu/pintu.jpg";//图片路径
        pt.id="pintu";//渲染id
        pt.callFn=callFn;//拼图成功后回调函数
        pt.init();//初始化拼图
    }
    //拼图成功回调函数
    function callFn(){
        clearInterval(dTime);
        $(".zz").show();
        $("#utime").text(dnum+"s");
        $(".endBox").css("top","0");
        $(".endLoad div").css("width","100%");
        setTimeout(function(){
            $(".pisBox").addClass("bounceIn animated");
            $(".endBox").css("top","-20vw");
            setTimeout(function(){
                $(".endLoad div").css("width","0");
            },500);
            if(dnum>20){
                $(".goodTime").hide();
                $("#xtime").text((dnum-20));
                $(".xtime").show();
            }else{
                $(".goodTime").show();
                $(".xtime").hide();
            }
        },3000);

    }
    //横屏处理
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        if (window.orientation === 180 || window.orientation === 0) {
            $(".view").hide();
            if(pstate==2){
                readyTime=setInterval(function(){
                    readyNum--;
                    $("#readyTime").text(readyNum);
                    if(readyNum<=0){
                        clearInterval(readyTime);
                        pstate=3;
                        $("#readyTime").hide();
                        readyNum=3;
                        dTime=setInterval(function(){
                            dnum++;
                            $("#dtime").text(dnum+"s");
                        },1000);
                    }
                },1000);
            }
            if(pstate==3){
                dTime=setInterval(function(){
                    dnum++;
                    $("#dtime").text(dnum+"s");
                },1000);
            }

        }
        if (window.orientation === 90 || window.orientation === -90 ){
            $(".view").show();
            if(pstate==2){
                clearInterval(readyTime);
            }
            if(pstate==3){
                clearInterval(dTime);
            }
        }
    }, false);
</script>
<div style="display:none">
    <script type="text/javascript" src="http://css.res.szgla.com/c/JS/WebVisit.js?v=20130404"></script>
    <script type="text/javascript" src="http://css.res.szgla.com/c/JS/WebClick.js?v=20130404"></script>
    <script src='http://w.cnzz.com/c.php?id=1259149311' language='JavaScript' charset='utf-8'></script>
</div>
</body>
</html>